<template>
  <Swiper class="x-swiper-pure" :width="boxWidth" :lazy-loading="true" :lazy="true"
    :autoplay="cfg.autoplay === 'true' ? { delay: (cfg.delay * 1000) || 3000, disableOnInteraction: false } : false" loop
    :space-between="0" :slides-per-view="1" :looped-slides="2" :centered-slides="true"
    :slides-offset-before="slidesOffset" :style="{ top: cfg.style.top }" @init="onInit">
    <swiper-slide v-for="x, i in cfg.data" :key="x.id" class="x-swiper-item">
      <div class="item-card">
        <div v-if="x.title" class="swiper-item-title relative z-2">
          {{ x.title }}
        </div>
        <swiper-child-item :data="x" :real-index="i" :axis-id="cfg.axis_id" :swiper="swiperExp" />
      </div>
    </swiper-slide>
    <swiper-skip :cfg="cfg"></swiper-skip>
  </Swiper>
</template>
<script lang="ts" setup name="SwiperPure">
const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});
const boxWidth = computed(() => Number(window.innerWidth * 0.6));
const slidesOffset = computed(() => (window.innerWidth - boxWidth.value) / 2);
const swiperExp = ref(null)

const onInit = (swiper) => {
  swiperExp.value = swiper
}
</script>

<style scoped lang="scss">
.x-swiper-pure {
  @apply absolute overflow-hidden left-0 z-100;
  top: 35%;
  width: 100vw;

  :deep(.swiper-wrapper) {
    align-items: center;
  }

  .swiper-box {
    @apply flex flex-nowrap;
    transition-duration: 300ms;
  }

  :deep(.x-swiper-item) {
    @apply relative flex flex-col items-center;
    transition-duration: 300ms;
    transform: scale(0.9);

    &.active,
    &.swiper-slide-active {
      transform: scale(1);
    }

    .swiper-item-title {
      @apply text-center block whitespace-nowrap overflow-ellipsis overflow-hidden relative z-2;
      font-size: 14px;
      margin-bottom: 8px;
      min-height: 18px;
    }
  }

  .item-card {
    @apply relative cursor-pointer w-full h-full backdrop-filter backdrop-blur-6px;
    box-sizing: border-box;
    background: rgba(227, 238, 255, 0.3);
    border-radius: 12px;
    border: 0.7px solid rgba(227, 238, 255, 0.7);
  }
}
</style>